<template>
  <div class="pim">
    <!-- <h1>个人信息</h1> -->
    <div class="basic_info">
      <div class="head_portrait">
        <img
          :src="
            userInfo.imageUrl
              ? origin + userInfo.imageUrl
              : 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201912%2F25%2F20191225224833_zloky.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1712114362&t=a72c97465de8b6e072c3946f59e075c1'
          "
          alt=""
        />
        <div>
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            style="width: 80px"
            action="/api/user/uploadUserImage"
            name="file"
          >
            <p style="color: #169cd5; text-align: center; font-size: 10px">
              点击修改头像
            </p>
          </el-upload>
        </div>
      </div>

      <ul class="info">
        <li style="font-size: 30px">
          <!-- {{ userInfo.username }} -->
          <i
            class="icon-nv iconfont"
            style="color: #ed5564; font-size: 20px"
          ></i>
          <i
            class="icon-nan iconfont"
            style="color: #3ab1db; font-size: 20px"
          ></i>
        </li>
        <li style="color: #8c8c8c">
          {{ userInfo.userName ? userInfo.userName : '暂无' }}
        </li>
      </ul>
    </div>

    <el-descriptions size="large" column="1" title="">
      <el-descriptions-item label="账号">
        {{ userInfo.userCode ? userInfo.userCode : '暂无' }}
      </el-descriptions-item>

      <el-descriptions-item label="手机号：">
        {{ userInfo.mobilePhone ? userInfo.mobilePhone : '暂无' }}
      </el-descriptions-item>

      <el-descriptions-item label="个人介绍：">
        {{ userInfo.description ? userInfo.description : '暂无' }}
      </el-descriptions-item>
    </el-descriptions>

    <el-dialog title="修改密码" v-model="dialogVisible" width="30%" center>
      <el-form label-width="100px" :model="pwdForm">
        <el-form-item label="旧密码" required>
          <el-input v-model="pwdForm.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" required>
          <el-input v-model="pwdForm.newPassword" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" required>
          <el-input
            v-model="pwdForm.sure_new_password"
            type="password"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" el-button>取 消</el-button>
        <el-button type="primary" @click="updatePwd">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="修改基本信息"
      v-model="infoDialogVisible"
      width="30%"
      center
    >
      <el-form label-width="80px" :model="infoForm">
        <el-form-item label="姓名" required>
          <el-input v-model="infoForm.userName"></el-input>
        </el-form-item>

        <el-form-item label="电话号码">
          <el-input v-model="infoForm.mobilePhone"></el-input>
        </el-form-item>
        <el-form-item label="个人简介">
          <el-input v-model="infoForm.description"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="infoDialogVisible = false" el-button>
          取 消
        </el-button>
        <el-button type="primary" @click="updateUserInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>

  <div class="edit-button">
    <el-button type="primary" @click="showEdit()">修改基本信息</el-button>
    <el-button type="primary" @click="dialogVisible = true">修改密码</el-button>
  </div>
</template>

<script>
// import { getUserInfo, editUserInfo, editPwd, editAvatar } from '@/api/common'
// import {
//   getStaffList,
//   getStaffDetail,
//   editStaff,
//   delStaff,
//   batchDelStaff,
//   createStaff,
//   getPostType
// } from '@/api/user'
import dayjs from 'dayjs'
import { updateUser, userDetail, updatePwd, uploadAvatar } from '../api/user'
export default {
  data() {
    return {
      token: window.localStorage.getItem('token'),
      userInfo: JSON.parse(window.localStorage.getItem('user_info')),
      dialogVisible: false,
      infoDialogVisible: false,
      username: window.sessionStorage.getItem('username')?.replace(/["]/g, ''),
      input: {
        id: '',
        post: '',
        newpassword: '',
        oldpassword: '',
        userPhone: ''
      },
      imageUrl: '',
      pwdForm: {
        password: '',
        newPassword: '',
        sure_new_password: ''
      },
      infoForm: {
        userName: '',
        userCode: '',
        mobilePhone: '',
        description: ''
      },
      postList: {},
      // origin: "https://api.iwsyt.com:8000/",
      origin: 'http://43.136.166.102:8090',
      file: '',
      headers: {
        'Access-Control-Allow-Origin': '*'
      }
    }
  },
  methods: {
    handleChange() {
      console.log('file', this.file)
    },
    updateUserInfo() {
      let params = this.infoForm
      this.infoDialogVisible = false
      updateUser(this.infoForm).then((res) => {
        this.$message.success('操作成功！')
        userDetail(this.infoForm.id).then((res) => {
          console.log('res', res)
          window.localStorage.setItem('user_info', JSON.stringify(res))
          this.userInfo = res
        })
      })
    },
    updatePwd() {
      if (this.pwdForm.old_password === this.pwdForm.new_password) {
        let params = { ...this.pwdForm, userId: this.userInfo.id }
        delete params.sure_new_password
        updatePwd(params).then((res) => {
          ElMessage.success('修改成功！')
          this.dialogVisible = false
        })
      } else {
        this.$message.error('两次输入密码不一致！')
      }
    },

    //点击修改头像
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)

      let params = {
        ...this.infoForm,
        avatar_url: res.data.avatar_url
      }
      if (this.infoForm.birth) {
        params = {
          ...params,
          birth: dayjs(this.infoForm.birth).format('YYYY-MM-DD')
        }
      }
      // editUserInfo(params).then((res) => {
      //   this.infoDialogVisible = false
      //   this.$message.success('修改成功！')
      //   this.getUserInfo()
      // })
    },
    beforeAvatarUpload(file) {
      const formData = new FormData()
      formData.append('file', file)
      formData.append('userId', this.userInfo.id)
      uploadAvatar(formData).then((res) => {
        this.infoDialogVisible = false
        this.$message.success('修改成功！')
        userDetail(this.userInfo.id).then((res) => {
          window.localStorage.setItem('user_info', JSON.stringify(res))
          this.userInfo = res
        })
      })
    },
    showEdit() {
      this.infoDialogVisible = true
      this.infoForm = JSON.parse(JSON.stringify(this.userInfo))
    }
  },
  created() {
    // this.getUserInfo();
    // const user_info = JSON.parse(window.localStorage.getItem('user_info'))
    // this.userInfo = user_info
    // this.infoForm = user_info
    // delete this.infoForm.id
    // getPostType().then((res) => {
    //   this.postList = res
    // })
  }
}
</script>

<style lang="less" scoped>
.pim {
  display: flex;
  align-items: center;
}
.edit-button {
  display: flex;
  justify-content: end;
}
.basic_info {
  // display: flex;
  margin: 40px 100px;
  text-align: center;
  img {
    width: 80px;
    height: 80px;
    border-radius: 40px;
  }
  .info {
    // margin-left: 30px;
    li {
      list-style: none;
      margin-bottom: 15px;
      font-size: 18px;
    }
  }
}
h3 {
  margin: 30px 0 10px 0;
}
.el-input {
  margin-right: 20px;
  width: 380px;
}
.dialog-footer {
  display: flex;
  justify-content: center;
}
</style>
